<template>
  <view class="profile-page">
    <!-- 新增顶部栏 -->
    <view class="page-header">
      <text class="page-title">个人中心</text>
    </view>

    <!-- 顶部背景和用户信息 -->
    <view class="header-section">
      <view class="header-bg"></view>
      <view class="user-info-container">
        <view class="user-card">
          <view class="user-avatar-wrapper">
            <image class="user-avatar" :src="avatarUrl" mode="aspectFill" @error="handleAvatarError"></image>
          </view>
          <view class="user-detail">
            <text class="user-name">{{ userInfo.name || '未登录' }}</text>
            <text class="user-phone">{{ userInfo.phone || '点击登录' }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="profile-container">
      <!-- 服务记录 -->
      <view class="service-section">
        <view class="section-title">服务记录</view>
        <view class="service-grid">
          <view class="service-item" @tap="navigateTo('/pages/profile/nursing-home-appointments/index')">
            <view class="service-icon">
              <text class="iconfont">&#xe614;</text>
            </view>
            <text class="service-name">养老院预约记录</text>
          </view>
          <view class="service-item" @tap="navigateTo('/pages/profile/charity-registrations/index')">
            <view class="service-icon">
              <text class="iconfont">&#xe601;</text>
            </view>
            <text class="service-name">公益活动报名</text>
          </view>
        </view>
      </view>
      
      <!-- 功能列表 -->
      <view class="feature-list">
        <view class="section-title">常用功能</view>
        
        <!-- 两个一排布局 -->
        <view class="feature-grid">
          <!-- 第一排 -->
          <view class="feature-row">
            <view class="feature-card" @tap="navigateTo('/pages/profile/reviews/index')">
              <view class="card-icon" style="background: linear-gradient(135deg, #e0f2f1, #b2dfdb);">
                <text class="iconfont">&#xe63a;</text>
              </view>
              <text class="card-name">我的评价</text>
            </view>
            
            <view class="feature-card" @tap="navigateTo('/pages/profile/favorites/index')">
              <view class="card-icon" style="background: linear-gradient(135deg, #fff8e1, #ffecb3);">
                <text class="iconfont" style="color: #e67e22;">&#xe715;</text>
              </view>
              <text class="card-name">我的收藏</text>
            </view>
          </view>
          
          <!-- 第二排 -->
          <view class="feature-row">
            <view class="feature-card" @tap="navigateTo('/pages/profile/feedback/index')">
              <view class="card-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb);">
                <text class="iconfont" style="color: #2196f3;">&#xe680;</text>
              </view>
              <text class="card-name">我的反馈</text>
            </view>
            
            <view class="feature-card" @tap="navigateTo('/pages/profile/settings/index')">
              <view class="card-icon" style="background: linear-gradient(135deg, #f5f5f5, #e0e0e0);">
                <text class="iconfont" style="color: #607d8b;">&#xe681;</text>
              </view>
              <text class="card-name">设置</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 关于我们 -->
      <view class="about-section">
        <view class="about-item" @tap="navigateTo('/pages/profile/about')">
          <text class="about-text">关于我们</text>
          <text class="item-arrow iconfont">&#xe6a3;</text>
        </view>
      </view>
      
      <!-- 退出登录按钮 -->
      <button class="logout-btn" @tap="handleLogout" v-if="isLoggedIn">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getUserAvatar } from '../../api/user.js';
import useAuthCheck from '../../utils/authCheck';

// 引入权限校验
const { checkAuth } = useAuthCheck();

// 用户头像
const avatarUrl = ref('../../image/R.jpg');
// 登录状态
const isLoggedIn = ref(false);
// 用户信息
const userInfo = reactive({
  name: '',
  phone: ''
});

// 页面加载时执行
onMounted(() => {
  // 检查登录状态
  if (checkAuth()) {
    // 已登录，可以执行其他初始化操作
    isLoggedIn.value = true;
    loadUserInfo();
    loadUserAvatar();
  }
});

// 加载用户信息
const loadUserInfo = () => {
  const userInfoStr = uni.getStorageSync('userInfo');
  if (userInfoStr) {
    try {
      const info = JSON.parse(userInfoStr);
      userInfo.name = info.name || '康怡用户';
      userInfo.phone = info.phone || '未绑定手机';
      console.log('用户信息:', info);
    } catch (error) {
      console.error('解析用户信息失败:', error);
    }
  }
};

// 加载用户头像
const loadUserAvatar = () => {
  getUserAvatar()
    .then(url => {
      avatarUrl.value = url;
    })
    .catch(error => {
      console.error('获取头像失败:', error);
      avatarUrl.value = '../../image/R.jpg';
    });
};

// 导航到指定页面
const navigateTo = (path) => {
  if (!isLoggedIn.value) {
    // 未登录则跳转到登录页
    uni.navigateTo({
      url: '/pages/login/index'
    });
    return;
  }
  
  uni.navigateTo({
    url: path
  });
};

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除缓存中的登录信息
        uni.removeStorageSync('token');
        uni.removeStorageSync('userInfo');
        
        // 更新状态
        isLoggedIn.value = false;
        userInfo.name = '';
        userInfo.phone = '';
        
        // 刷新页面或提示用户已退出
        uni.showToast({
          title: '已退出登录',
          icon: 'success'
        });
      }
    }
  });
};

// 处理头像加载错误
const handleAvatarError = () => {
  console.log('头像加载失败，使用默认头像');
  avatarUrl.value = '../../image/R.jpg';
};
</script>

<style lang="scss">
page {
  background-color: #f8f9fa;
  min-height: 100%;
}

.profile-page {
  min-height: 100%;
  padding-bottom: 50px; /* 为tabBar预留空间 */
  
  // 新增顶部标题栏样式
  .page-header {
    position: relative;
    z-index: 10;
    padding: 15px 20px;
    background-color: #2c7873;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    .page-title {
      font-size: 18px;
      color: #ffffff;
      font-weight: 600;
    }
  }
  
  // 顶部带背景的头像区域
  .header-section {
    position: relative;
    height: 140px; // 减小高度，因为上面增加了标题栏
    margin-bottom: 80px;
    
    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #2c7873, #6FB3B8);
    }
    
    .user-info-container {
      position: absolute;
      width: 100%;
      bottom: -60px;
      padding: 0 20px;
      
      .user-card {
        background-color: #fff;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: row; // 改为横向布局
        align-items: center;
        
        .user-avatar-wrapper {
          margin-right: 20px;
          
          .user-avatar {
            width: 70px;
            height: 70px;
            border-radius: 35px;
            border: 2px solid #fff;
            background-color: #f0f0f0;
          }
        }
        
        .user-detail {
          flex: 1;
          
          .user-name {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            display: block;
          }
          
          .user-phone {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
  
  .profile-container {
    padding: 0 15px;
    
    // 服务记录部分
    .service-section {
      background-color: #fff;
      border-radius: 16px;
      padding: 18px;
      margin-bottom: 18px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        padding-left: 12px;
        position: relative;
        
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 16px;
          background: linear-gradient(to bottom, #6FB3B8, #2c7873);
          border-radius: 2px;
        }
      }
      
      .service-grid {
        display: flex;
        justify-content: space-around;
        
        .service-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .service-icon {
            width: 60px;
            height: 60px;
            border-radius: 18px;
            background: linear-gradient(135deg, #e7f3f2, #c3e3e3);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            box-shadow: 0 4px 10px rgba(44, 120, 115, 0.1);
            
            .iconfont {
              font-size: 26px;
              color: #2c7873;
            }
          }
          
          .service-name {
            font-size: 14px;
            color: #555;
            text-align: center;
          }
        }
      }
    }
    
    // 功能列表
    .feature-list {
      background-color: #fff;
      border-radius: 16px;
      padding: 20px 18px;
      margin-bottom: 18px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        padding-left: 12px;
        position: relative;
        
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 16px;
          background: linear-gradient(to bottom, #6FB3B8, #2c7873);
          border-radius: 2px;
        }
      }
      
      // 两个一排网格布局样式
      .feature-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
        
        .feature-row {
          display: flex;
          justify-content: space-between;
          gap: 18px;
          
          .feature-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 18px 10px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            
            &:active {
              transform: scale(0.96);
              box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
            }
            
            .card-icon {
              width: 60px;
              height: 60px;
              border-radius: 20px;
              background: linear-gradient(135deg, #e7f3f2, #c3e3e3);
              display: flex;
              justify-content: center;
              align-items: center;
              margin-bottom: 12px;
              box-shadow: 0 4px 10px rgba(44, 120, 115, 0.15);
              
              .iconfont {
                font-size: 28px;
                color: #2c7873;
              }
            }
            
            .card-name {
              font-size: 15px;
              font-weight: 500;
              color: #444;
              text-align: center;
            }
          }
        }
      }
    }
    
    // 关于我们
    .about-section {
      background-color: #fff;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 18px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      
      .about-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px;
        
        .about-text {
          font-size: 15px;
          color: #444;
          font-weight: 500;
        }
        
        .item-arrow {
          font-size: 18px;
          color: #999;
        }
      }
    }
    
    // 退出登录按钮
    .logout-btn {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: linear-gradient(135deg, #ff6b6b, #f53e3e);
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      border-radius: 25px;
      border: none;
      box-shadow: 0 4px 15px rgba(245, 62, 62, 0.25);
      margin: 25px 0 30px;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(245, 62, 62, 0.25);
      }
    }
  }
}
</style> 